<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增用户')" />
	<!-- 	<th:block th:include="include :: select2-css" /> -->
</head>
<style>
	.layui-card-header{line-height: 42px;color: #333;background:#d4f5f2;}
	.layui-form-label{width:110px;}
	.layui-input-block{margin-left:120px;}
	.layui-form-radio{padding-right:0}
	.layui-icon-more{position: absolute;right: 10px;top: 7px;cursor: pointer;}
</style>
<body>
<div class="container" style="padding:12px 15px;background: #F2F2F2;">
	<div class="layui-card">
		<div class="layui-card-header">用户信息 - 新增</div>
		<div class="layui-card-body">
		<form class="layui-form" id="form-user-add" lay-filter="form-user">
			<div class="layui-form-item">
				<div class="layui-col-sm4">
					<label class="layui-form-label"><font class="f_red">*</font>用户编号：</label>
					<div class="layui-input-block">
						<input type="text" name="userId" id="userId" th:value="${sysUserInfo?.userId}" lay-verify="required" autocomplete="off" th:class="${sysUserInfo}?'layui-input canntEdit':'layui-input'" th:readonly="${sysUserInfo}? 'true' : 'false'" onblur="inputOnBlur(this)">
					</div>
				</div>
				<div class="layui-col-sm4">
					<label class="layui-form-label"><font class="f_red">*</font>用户名称：</label>
					<div class="layui-input-block">
						<input type="text" name="userName" id="userName" th:value="${sysUserInfo?.userName}" lay-verify="required" autocomplete="off" class="layui-input" onblur="inputOnBlur(this)">
					</div>
				</div>
				<div class="layui-col-sm4">
					<label class="layui-form-label">用户级别：</label>
					<div class="layui-input-block">
						<select name="userLevel">
							<option value="">请选择用户级别</option>
							<option th:each="userLevelList:${userLevelMap}" th:value="${userLevelList.key}" th:text="${userLevelList.value}" th:selected="${userLevelList.key} eq ${sysUserInfo?.userLevel}"></option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-col-sm4">
					<label class="layui-form-label" style="padding-top: 10px;">员工状态：</label>
					<div class="layui-input-block" th:with="type=${@baseinfosimple.getBaseInfoSimpleData('ygzt')}">
						<input th:each="dict : ${type}" type="radio" name="userState" th:value="${dict.vname}" th:title="${dict.vname}" th:checked="${dict.vname} eq ${sysUserInfo?.userState}">
					</div>
				</div>
				<div class="layui-col-sm4">
					<label class="layui-form-label" style="padding-top: 10px;">性别：</label>
					<div class="layui-input-block">
						<input type="radio" name="userSex" value="男" title="男" th:checked="'男' eq ${sysUserInfo?.userSex}">
						<input type="radio" name="userSex" value="女" title="女" th:checked="'女' eq ${sysUserInfo?.userSex}">
						<input type="radio" name="userSex" value="其它" title="其它" th:checked="'其它' eq ${sysUserInfo?.userSex}">
					</div>
				</div>
				<div class="layui-col-sm4">
					<label class="layui-form-label" style="padding-top: 10px;">用户状态：</label>
					<div class="layui-input-block">
						<input type="checkbox" th:checked="${sysUserInfo?.disabled == false or sysUserInfo?.disabled == null}" name="disabled" lay-skin="switch" lay-text="启用|禁用">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-col-sm4">
					<label class="layui-form-label"><font class="f_red">*</font>用户类型：</label>
					<div class="layui-input-block">
						<select name="userType" id="userType" lay-filter="userType" lay-verify="required" th:with="type=${@baseinfosimple.getBaseInfoSimpleData('yhlx')}">
							<option value="">请选择</option>
							<option th:each="dict : ${type}" th:text="${dict.vname}" th:data-guid="${dict.guid}" th:value="${dict.vid}" th:selected="${dict.vid} eq ${sysUserInfo?.userType}"></option>
						</select>
					</div>
				</div>
				<div class="layui-col-sm4">
					<label class="layui-form-label"><font class="f_red">*</font>工作省份：</label>
					<div class="layui-input-block">
						<select name="userProvince" id="userProvince" lay-filter="userProvince" lay-verify="required" th:with="type=${@baseinfosimple.getBaseInfoSimpleData('area2')}">
							<option value="">请选择</option>
							<option th:each="dict : ${type}" th:text="${dict.vname}" th:data-guid="${dict.guid}" th:value="${dict.vid}" th:selected="${dict.vid} eq ${sysUserInfo?.userProvince}"></option>
						</select>
					</div>
				</div>
				<div class="layui-col-sm4">
					<label class="layui-form-label"><font class="f_red">*</font>工作城市：</label>
					<div class="layui-input-block">
						<select name="userCity" id="userCity" lay-filter="userCity" lay-verify="required">
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-col-sm4">
					<label class="layui-form-label"><font class="f_red">*</font>所属办公室：</label>
					<div class="layui-input-block">
						<select name="vBgs" id="vBgs" lay-filter="vBgs" lay-verify="required" th:with="type=${@baseinfosimple.getBaseInfoSimpleData('bgs')}">
							<option value="">请选择</option>
							<option th:each="dict : ${type}" th:text="${dict.vname}" th:data-guid="${dict.guid}" th:value="${dict.vid}" th:selected="${dict.vid} eq ${sysUserInfo?.vBgs}"></option>
						</select>
					</div>
				</div>
				<div class="layui-col-sm4">
					<label class="layui-form-label">工作地址：</label>
					<div class="layui-input-block">
						<input type="text" name="userAddress" id="userAddress" th:value="${sysUserInfo?.userAddress}" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-col-sm4">
					<label class="layui-form-label"><font class="f_red">*</font>所属上级：</label>
					<div class="layui-input-block">
						<input type="text" name="userLeader" id="userLeader" th:value="${sysUserInfo?.userLeader}" autocomplete="off" class="layui-input"  lay-verify="required" readonly />
						<i class="layui-icon layui-icon-more" onclick="modalSelect('userLeader')"></i>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-col-sm4">
					<label class="layui-form-label"><font class="f_red">*</font>主角色：</label>
					<div class="layui-input-block">
						<input type="text" id="positionName" autocomplete="off" class="layui-input" lay-verify="required" readonly/>
						<input type="hidden" name="PositionGuid" id="PositionGuid">
						<i class="layui-icon layui-icon-more" onclick="modalSelect('positionName')"></i>
					</div>
				</div>
				<div class="layui-col-sm4">
					<label class="layui-form-label"><font class="f_red">*</font>手机号码：</label>
					<div class="layui-input-block">
						<input type="text" name="userPhone2" th:value="${sysUserInfo?.userPhone2}" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-col-sm4">
					<label class="layui-form-label">办公电话：</label>
					<div class="layui-input-block">
						<input type="text" name="userPhone1" th:value="${sysUserInfo?.userPhone1}" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-col-sm4" th:if="${buttonState['relatebtn']} neq 'hidden'" >
					<label class="layui-form-label">关联档案：</label>
					<div class="layui-input-block">
						<input type="text" id="daXX" autocomplete="off" class="layui-input" readonly/>
						<input type="hidden" name="DANid" id="DANid"/>
						<i class="layui-icon layui-icon-more" onclick="modalSelect('daXX')"></i>
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<div class="layui-input-block" style="margin:0;">
					<button class="layui-btn" lay-submit lay-filter="btn-add">保存</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</div>
<th:block th:include="include :: footer" />
<script type="text/javascript">
	/*<![CDATA[*/
	var pageType = "[[${pageType}]]";
	var userProvince = "[[${sysUserInfo?.userProvince}]]";
	var userCity = "[[${sysUserInfo?.userCity}]]";
	// var getBaseInfoSimpleData = [[${@baseinfosimple.getBaseInfoSimpleData('bgs')}]];

	// console.log(getBaseInfoSimpleData,7777)
	/*]]>*/

	$(".container").css("min-height",$(window).height()-30);
	var $,layer,form,table,laydate;
	layui.use(['laydate', 'table','form','layer','jquery'], function () {
		$ = layui.$,layer = layui.layer,form = layui.form,table = layui.table,laydate = layui.laydate;
		laydate.render({elem:'#userBirthday',type:'date',format: "yyyy-MM-dd"});
		$(function(){
			var cProvince = $("[name=userProvince]").find("option:selected").attr("data-guid");
			if(cProvince){
				$.ajax({
					url: '/base/baseinfo/list?pguid='+cProvince,
					type: 'get',
					dataType: 'json',
					success: function(result) {
						$('#userCity').append(new Option('请选择城市',''));
						$.each(result.data,function(i,v){
							if(v.vname == userCity){
								$('#userCity').append('<option value="'+v.vid+'" data-guid="'+v.guid+'" selected>'+v.vname+'</option>')
							}else{
								$('#userCity').append('<option value="'+v.vid+'" data-guid="'+v.guid+'">'+v.vname+'</option>')
							}
						});
						form.render();
					}
				});
			}
		})
		//切换所属办公室
		form.on('select(vBgs)', function(e) {
			// console.log(e,999)
            $.ajax({
                type: "GET",
                url: '/base/baseinfo/list?vname='+e.value,
                success: function (res) {
					$('#userAddress').val(res.data[0].vremark)
                //    console.log(res)
                }
            })
        })

		//联动获取城市列表
		form.on('select(userProvince)', function(data){
			var pguid = data.elem[data.elem.selectedIndex].dataset.guid;
			getCity(pguid);
		})
		function getCity(pguid,cityname){
			$.ajax({
				url: '/base/baseinfo/list?pguid='+pguid,
				type: 'get',
				dataType: 'json',
				success: function(result) {
					var areaList = '<option value="">请选择城市</option>';
					$.each(result.data,function(k,v){
						if(cityname == v.vname){
							areaList += '<option value="'+v.vname+'" data-guid="'+v.pguid+'" selected>'+v.vname+'</option>';
						}else{
							areaList += '<option value="'+v.vname+'" data-guid="'+v.pguid+'">'+v.vname+'</option>';
						}
					});
					$("#userCity").empty();
					$("#userCity").append(areaList);
					form.render('select');
				}
			})
		}
		form.on('submit(btn-add)', function(data){
			data.field.disabled = data.field.disabled === "on" ? "0":"1";
			var mobile=/^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
			var tel = /^(0\d{2,3}-)?\d{7,8}$/g;
			if(data.field.userPhone1 !="" && tel.test(data.field.userPhone1) == false) {
				$.modal.msgError("办公电话格式不对！");
				return false;
			}
			if(data.field.userPhone2 !="" && mobile.test(data.field.userPhone2) == false) {
				$.modal.msgError("手机号码格式不对！");
				return false;
			}
			var postStr = [];
			postStr.push(data.field);
			//TODO:提供一个检测表单数据检测性通用方法
			if(true){
				if(pageType == 'edit'){
					var url = "/system/user/editpost";
					var data = {'userInfoItems':JSON.stringify(postStr),'upType':'upuser'};
				}else{
					var url = "/system/user/addpost";
					var data = {'userInfoItems':JSON.stringify(postStr)};
				}
				$.operate.post(url,data,function(result){
					if(result.code == 0)
						setTimeout(function(){
							window.location.reload();
						}, 1000);
				});
			}
			return false;
		});
	})
	function modalSelect(forField){
		switch(forField){
			case 'userLeader':
				var title = "选择上级", url = "/system/user/userselect?pagetype=radio", mWidth = "600", mheight = "470";
				break;
			case 'daXX':
				var title = "选择档案", url = "/hr/personneldaxx/select";
				break;
			case 'positionName':
				var title = "选择主角色", url = "/system/role/select?pagetype=radio", mWidth = "500", mheight = "460";
				break;
		}
		$.modal.open(title,url,mWidth,mheight,function(index){
			var res = window["layui-layer-iframe" + index].callbackdata();
			if(!!res){
				switch(forField){
					case 'userLeader':
						$("#userLeader").val(res.userId);
						break;
					case 'daXX':
						$("#daXX").val('"'+res.userName+'"' + " 的档案");
						$("#DANid").val(res.nid);
						break;
					case 'positionName':
						$("#positionName").val(res.roleName);
						$("#PositionGuid").val(res.guid);
						break;
				}
				layer.closeAll();
			}else{
				layer.msg("请选择人员！");
			}
		})
	}
</script>
</body>
</html>
